<template>
  <div class="main-container">
    <el-header class="header">
      <h1>~ - - My Family - - ~</h1>
    </el-header>
    <!-- 横向悬浮移动的欢迎文字 -->
    <div class="welcome-text">
      <span> 欢 迎 使 用 智 能 账 单 分 类 管 理 系 统</span>
    </div>
    <!-- 轮播图 -->
    <el-carousel :interval="3000" type="card" height="calc(100vh - 100px)">
      <el-carousel-item v-for="(image, index) in images" :key="index">
        <img :src="image" alt="轮播图" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        require('@/assets/image1.jpg'),
        require('@/assets/image2.jpg'),
        require('@/assets/image3.jpg'),
        require('@/assets/image4.jpg'),
        require('@/assets/image5.jpg'),
        require('@/assets/image6.jpg'),
        require('@/assets/image7.jpg'),
      ]
    }
  }
}
</script>

<style scoped>
.main-container {
  overflow: hidden;
  /* 隐藏滚动条 */
  height: 80vh;
}

.welcome-text {
  margin-top: 10px;
  margin-bottom: 50px;
  width: 100%;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  font-style: italic;
  background-image: linear-gradient(to right,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      violet);
  -webkit-background-clip: text;
  background-clip: text;
  /* 添加标准属性 */
  -webkit-text-fill-color: transparent;
  animation: moveText 10s linear infinite;
}

@keyframes moveText {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.carousel-image {
  width: 100%;
  height: 80%;
  object-fit: cover;
  object-position: center;
  border-radius: 30px;
}

.header {
  display: flex;
  font-size: 20px;
  justify-content: center;
  align-items: center;
  color: #494848;
  animation: float 3s ease-in-out infinite;
  text-shadow: 0 0 10px #f303db, 0 0 20px #b12306, 0 0 30px #97b106;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}
</style>